import './App.css';
import { useState } from 'react';
import { useSelector,useDispatch } from 'react-redux';
import { decrement, increment, selectCount,incrementByAmount } from './features/counter/counterSlice';

function App() {

  // const [num,setNum] = useState(0)
  const num = useSelector(selectCount)

  const dispatch = useDispatch()

  const [amount,setAmount] = useState(2)
  const handleInput = (event) => {
    setAmount(Number(event.target.value))
  }

  return (
    <div className="App">
      <button onClick={()=>dispatch(decrement())}>-</button>
      <span>{ num }</span>
      <button onClick={()=>dispatch(increment())}>+</button>
      <button onClick={()=>dispatch(incrementByAmount(amount))}>+amount</button>
      <div>
        {/* <input onInput={handleInput}>{amount}</input> */}
        <input onInput={handleInput} value={amount} type='number'></input>
      </div>
    </div>
  );
}

export default App;
